<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class='table-operator'>
      <a-button @click='addCategory()' type='primary' icon='plus'>新增污染小类</a-button>
    </div>

    <a-table
      ref='table'
      size='middle'
      bordered
      :rowKey="record => record.categoryId"
      childrenColumnName='childrenColumnName'
      :columns='columns'
      :dataSource='dataSource'
      :pagination="false"
    >



      <span slot='keyword' slot-scope='text, record'>
          <span v-if='text.children&&text.children.length===0'
                 @click='editKey(record.categoryId,record.children)'
                 style='margin-left: 5px;color: #ff0000;cursor: pointer'>暂无请添加</span>
          <span v-else @click='editKey(record.categoryId,record.children)'
                v-for='(item,index) in text.children' :key='index'
                style='margin-left: 5px;color: #3399ff;cursor: pointer'><span
            v-show='index!=0'>
          </span>{{ item.keyName }}</span>
      </span>

      <span slot='action' slot-scope='text, record,index'>
<!--            <a v-if='text.status===1' @click='changeStatus(record.id,index)'>停用</a>-->
<!--            <a v-else @click='changeStatus(record.id,index)'>启用</a>-->
            <a-divider type='vertical' />
            <a @click='handleEdit(record)'> 编辑 </a>
            <a-divider type='vertical' />
            <a @click='handleDel(record.categoryId)'> 删除 </a>
      </span>
    </a-table>
    <AddCategoryModal ref='addCategoryModal' v-on:getPolluteCategoryList="getPolluteCategoryList"></AddCategoryModal>
    <EditKeyWordModal ref='editKeyWordModal' v-on:getPolluteCategoryList="getPolluteCategoryList"></EditKeyWordModal>
    <EditPolluteCategoryModal ref='editPolluteCategoryModal' v-on:getPolluteCategoryList="getPolluteCategoryList"></EditPolluteCategoryModal>
  </div>
</template>

<script>
import AddCategoryModal from '@views/epa/epa-statistics/Modal/AddCategoryModal'
import EpaSortService from '@/myService/EpaSortService'
import EditKeyWordModal from '@views/epa/epa-statistics/Modal/EditKeyWordModal'
import EditPolluteCategoryModal from '@views/epa/epa-statistics/Modal/EditPolluteCategoryModal'
export default {
  name: 'EpaStatisticsKeywordTemplate',
  components:{
    AddCategoryModal,
    EditKeyWordModal,
    EditPolluteCategoryModal,
  },
  data() {
    return {
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '污染大类',
          dataIndex: 'polluteName',
          align: 'center'
        },
        {
          title: '污染小类',
          dataIndex: 'categoryName',
          align: 'center'
        },
        {
          title: '关键字',
          align: 'center',
          key: 'keyword',
          ellipsis: true,
          scopedSlots: { customRender: 'keyword' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created() {
    this.getPolluteCategoryList()
  },
  methods:{
    handleEdit(record){
      this.$refs.editPolluteCategoryModal.open(record);
    },
    handleDel(categoryId){
      console.log("删除")
      console.log(this.dataSource)
      console.log(categoryId)
      EpaSortService.deleteSortCategoryFalse({id:categoryId}).then((res)=>{
        console.log(res)
        if(res.result==1){
          this.$message.success("删除成功")
          this.getPolluteCategoryList();
        }
      })
    },
    addCategory(){
      this.$refs.addCategoryModal.open()
    },
    getPolluteCategoryList(){
      EpaSortService.getPolluteCategoryList({polluteId:-1}).then((res)=>{
        this.dataSource=res.result;
        console.log(this.dataSource)
      })
    },
    editKey(categoryId,keyWord){
      console.log(this.dataSource)
      console.log(categoryId,keyWord)
      this.$refs.editKeyWordModal.open(categoryId,keyWord)
    }
  }
}
</script>

<style scoped>

</style>